<template>
  <div class="follow-container">
    <Card class="follow-card">
      <div class="card-header">
        <h2>
          <Icon type="ios-heart" />
          关注列表
          <span class="follow-count">({{ followList.length }})</span>
        </h2>
      </div>

      <div class="follow-list">
        <!-- 加载中状态 -->
        <div v-if="loading" class="loading-state">
          <Spin size="large">
            <Icon type="ios-loading" size="18" class="spin-icon-load"></Icon>
            <div>加载中...</div>
          </Spin>
        </div>

        <!-- 有关注时显示列表 -->
        <div v-else-if="followList.length > 0">
          <div v-for="follow in followList" 
               :key="follow.id" 
               class="follow-item"
               @click="goToUserPage(follow.followId)">
            <div class="follow-avatar">
              <img :src="follow.avatar" :alt="follow.nickname">
            </div>
            <div class="follow-info">
              <div class="follow-name">{{ follow.nickname }}</div>
              <div class="follow-meta">
                <span>
                  <Icon type="ios-people-outline" />
                  {{ follow.fansCount }} 粉丝
                </span>
                <span>
                  <Icon type="ios-heart-outline" />
                  {{ follow.followCount }} 关注
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 无关注时显示提示 -->
        <div v-else class="no-follow">
          <Icon type="ios-heart-outline" size="48"/>
          <p>暂无关注</p>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import {getFollowByUserId, getUser} from "@/api/api";

export default {
  name: "FollowListPage",
  data() {
    return {
      followList: [],
      loading: true // 添加loading状态
    }
  },
  methods: {
    goToUserPage(userId) {
      this.$router.push({
        path: '/PersonalPage',
        query: { userId }
      });
    },

    // 新增方法：加载用户详细信息
    async loadUserDetails() {
      try {
        const res = await getFollowByUserId(this.$route.query.userId);
        if (res.body.code === 1) {
          const followData = res.body.data;
          // 使用 Promise.all 并行请求所有用户数据
          const userDetailsPromises = followData.map(follow => 
            getUser(follow.followId).then(res => ({
              ...follow,
              avatar: res.body.data.avatar,
              nickname: res.body.data.nickname,
              fansCount: res.body.data.fansCount,
              followCount: res.body.data.followCount
            }))
          );

          // 等待所有请求完成
          this.followList = await Promise.all(userDetailsPromises);
        } else {
          this.$Message.error(res.body.msg || '获取关注列表失败');
        }
      } catch (error) {
        this.$Message.error('加载数据失败');
      } finally {
        this.loading = false;
      }
    }
  },
  created() {
    this.loadUserDetails();
  }
}
</script>

<style scoped>
.follow-container {
  width: 75vw;
  margin: 20px auto;
}

.follow-card {
  background: white;
  border-radius: 10px;
  padding: 0;
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.follow-count {
  color: #999;
  font-size: 14px;
  font-weight: normal;
}

.follow-list {
  padding: 20px;
}

.follow-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;
}

.follow-item:last-child {
  border-bottom: none;
}

.follow-item:hover {
  background-color: #f8f8f8;
}

.follow-avatar {
  margin-right: 15px;
}

.follow-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.follow-info {
  flex: 1;
}

.follow-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.follow-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 13px;
}

.follow-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.no-follow {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.no-follow p {
  margin-top: 10px;
  font-size: 14px;
}

/* 确保图标垂直对齐 */
.ivu-icon {
  vertical-align: middle;
}

/* 添加加载状态样式 */
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.spin-icon-load {
  animation: ani-spin 1s linear infinite;
}

@keyframes ani-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>